<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<f:facet name="first">
		<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
		<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
		<title>Mensagem</title>
	</f:facet>
	<h:outputStylesheet name="default.css" library="css" />
	<h:outputStylesheet name="syntaxhighlighter.css" library="css" />
	<h:outputStylesheet name="style.css" library="css" />
	<h:outputScript name="script.js" library="js" />
</h:head>
<h:body>
	<p:layout fullPage="true" id="layoutPrincipal">

		<p:layoutUnit position="north" size="60">
			<h:form>
				<p:toolbar>
					<p:toolbarGroup align="left">
						<p:commandButton value="Escrever"
							oncomplete="escreverDialog.show()"
							icon="ui-icon ui-icon-document"
							action="#{mensagemMB.prepararEnviarMensagem}"
							update=":dialogEscrever, :formAnexo:dtListaAnexos" />

						<p:commandButton value="Imprimir" icon="ui-icon ui-icon-document" />

						<p:commandButton value="Ramais" icon="ui-icon ui-icon-document"
							onclick="dialogRamais.show()" update=":formRamais:dtListaRamais" />

						<p:commandButton value="Usuários" icon="ui-icon ui-icon-document" />
					</p:toolbarGroup>
				</p:toolbar>
			</h:form>
			<h:form>

			</h:form>
		</p:layoutUnit>

		<p:layoutUnit position="west" size="200" resizable="true"
			collapsible="true" header="MENU">
			<h:form>
				<p:commandButton value="Mensagens Recebidas"
					update=":formMensagens, :formMensagemView" style="width:180px;"
					action="#{mensagemMB.renderizarDatatables}">
					<f:setPropertyActionListener target="#{mensagemMB.parametro}"
						value="entrada" />
				</p:commandButton>

				<p:commandButton value="Mensagens Enviadas"
					update=":formMensagens, :formMensagemView"
					action="#{mensagemMB.renderizarDatatables}" style="width:180px;">
					<f:setPropertyActionListener target="#{mensagemMB.parametro}"
						value="enviados" />
				</p:commandButton>
			</h:form>
		</p:layoutUnit>

		<p:layoutUnit position="center">
			<p:layout>
				<!-- Renderizar de acordo com o clique do menu! -->
				<p:layoutUnit position="north" size="50%" resizable="true"
					styleClass="nestedUnit" id="layoutDatatable">
					<h:form id="formMensagens" enctype="multipart/form-data">

						<!-- 
						<p:poll interval="10" update="dtMensagensRecebidas" /> -->

						<!-- Mensagens recebidas -->
						<p:dataTable emptyMessage="Nenhuma mensagem recebida..."
							value="#{mensagemMB.dmListaMensagensRecebidas}" var="recebidas"
							id="dtMensagensRecebidas" widgetVar="dtMensagensRecebidas"
							rendered="#{mensagemMB.parametro == 'entrada'}">

							<p:column headerText="Ação" width="20">
								<p:commandButton icon="ui-icon-search" title="Visualizar..."
									actionListener="#{mensagemMB.visualisarMensagemRecebida}"
									update=":formMensagemView:mensagemView">
									<f:setPropertyActionListener value="#{true}"
										target="#{requestScope.renderizarCampo}" />
								</p:commandButton>
							</p:column>

							<p:column width="200">
								<f:facet name="header">
									<h:outputText value="De" style="margin-left: 150px;" />
									<p:commandLink onclick="dialogPesquisaNome.show()">
										<p:graphicImage value=" #{resource['images/search.png']}" />
									</p:commandLink>
									<p:commandLink action="#{mensagemMB.limparDados}"
										update=":formMensagens:dtMensagensRecebidas"
										rendered="#{mensagemMB.nome != ''}">
										<p:graphicImage value="#{resource['images/delete.png']}" />
									</p:commandLink>
								</f:facet>
								<h:outputText value="#{recebidas.mensagem.usuario.nome}" />
							</p:column>


							<p:column>
								<f:facet name="header">
									<h:outputText value="Assunto" />
									<p:commandLink onclick="dialogPesquisaAssunto.show()"
										style="margin-left: 20px;">
										<p:graphicImage value="#{resource['images/search.png']}" />
									</p:commandLink>
									<p:commandLink action="#{mensagemMB.limparDados}"
										update=":formMensagens:dtMensagensRecebidas"
										rendered="#{mensagemMB.assunto != ''}">
										<p:graphicImage value="#{resource['images/delete.png']}" />
									</p:commandLink>
								</f:facet>
								<h:outputText value="#{recebidas.mensagem.assunto}" />
							</p:column>

							<p:column>
								<f:facet name="header">
									<h:outputText value="Data" />
									<p:commandLink onclick="dialogPesquisaData.show()"
										style="margin-left: 20px;">
										<p:graphicImage value="#{resource['images/search.png']}" />
									</p:commandLink>
									<p:commandLink action="#{mensagemMB.limparDados}"
										update=":formMensagens:dtMensagensRecebidas"
										rendered="#{mensagemMB.data != null}">
										<p:graphicImage value="#{resource['images/delete.png']}" />
									</p:commandLink>
								</f:facet>
								<h:outputText value="#{recebidas.mensagem.dtinclusao}">
									<f:convertDateTime pattern="dd/MM/yyyy" type="both"
										dateStyle="short" />
								</h:outputText>
							</p:column>

							<p:column headerText="Status" width="20">
								<p:graphicImage
									value="/mensageiro/javax.faces.resource/images/#{recebidas.status}.png.xhtml"
									id="gp" />
							</p:column>


						</p:dataTable>


						<!-- Mensagens enviadas -->
						<p:dataTable emptyMessage="Nenhuma mensagem..."
							value="#{mensagemMB.dmListaMensagensEnviadas}" var="mensagens"
							id="dtMensagensEnviadas" widgetVar="wtMensagensEnviadas"
							rendered="#{mensagemMB.parametro == 'enviados'}">

							<p:column headerText="Ação" width="20">
								<p:commandButton icon="ui-icon-search" title="Visualizar..."
									update=":formMensagemView:mensagemView, @form"
									actionListener="#{mensagemMB.visualisarMensagemEnviada}">
									<f:setPropertyActionListener value="#{true}"
										target="#{requestScope.renderizarCampo}" />
								</p:commandButton>
							</p:column>

							<p:column headerText="Para" width="150">
								<h:outputText value="#{mensagens.usuario.nome}" />
							</p:column>

							<p:column headerText="Assunto">
								<h:outputText value="#{mensagens.assunto}" />
							</p:column>

							<p:column headerText="Data">
								<h:outputText value="#{mensagens.dtinclusao}">
									<f:convertDateTime pattern="dd/MM/yyyy" type="both"
										dateStyle="short" />
								</h:outputText>
							</p:column>

						</p:dataTable>
					</h:form>
				</p:layoutUnit>

				<!-- Visualização dos emails -->
				<p:layoutUnit position="center" styleClass="nestedUnit">
					<h:form id="formMensagemView">
						<p:outputPanel id="mensagemView">
							<p:panel
								style="width: 99%; height: 30px; background-color: #DCDCDC;"
								rendered="#{requestScope.renderizarCampo}">
								<h:panelGrid columns="2">
									<p:commandButton value="Responder"
										oncomplete="escreverDialog.show()"
										icon="ui-icon ui-icon-document"
										action="#{mensagemMB.prepararResponderMensagem}"
										update=":dialogEscrever, :formAnexo:dtListaAnexos"
										style="margin-top: -5px;" />

									<p:commandButton value="Anexo"
										onclick="dialogAnexosRecebidos.show()"
										update=":formAnexoRecebidos:dtListaAnexos"
										rendered="#{not empty mensagemMB.files}"
										style="margin-top: -5px;" />
								</h:panelGrid>
							</p:panel>

							<br />
							<h:outputText
								value="#{mensagemMB.parametro == 'entrada' ? mensagemMB.mensagemDestinatario.mensagem.mensagem : mensagemMB.mensagem.mensagem}"
								style="font-size: 16px; margin-top: 30px;" />

						</p:outputPanel>
					</h:form>
				</p:layoutUnit>
			</p:layout>

		</p:layoutUnit>

	</p:layout>

	<p:dialog widgetVar="escreverDialog" modal="true"
		header="Nova mensagem" width="600" showEffect="fade" hideEffect="fade"
		resizable="false" draggable="false" id="dialogEscrever">
		<h:form id="formDialog">
			<p:growl id="mensagem" />
			<h:panelGrid columns="2" cellspacing="5" id="gridEscrever">
				<h:outputLabel value="Destinatário (os): " />
				<p:commandButton value="Adicionar Destinatários...."
					onclick="dialogDestinatarios.show()" />

				<h:outputLabel value="Grupo (os): " />
				<p:commandButton value="Adicionar Grupos...."
					onclick="dialogGrupos.show()" />

				<h:outputLabel for="assunto" value="Assunto: " />
				<p:inputText id="assunto" size="50" required="true"
					requiredMessage="O assunto é requerido!"
					value="#{mensagemMB.mensagem.assunto}" />

			</h:panelGrid>

			<p:commandButton value="Anexar arquivos"
				onclick="dialogAnexos.show()" />

			<p:separator />

			<p:inputTextarea rows="20" cols="110"
				value="#{mensagemMB.mensagem.mensagem}" maxlength="450" />

			<p:separator />

			<p:commandButton value="Enviar"
				actionListener="#{mensagemMB.enviarMensagem}"
				update=":formMensagens:dtMensagensEnviadas, :formMensagens:dtMensagensRecebidas, :formDialog:mensagem"
				process="@form" oncomplete="enviarMensagem(xhr, status, args)" />

			<p:commandButton value="
				Cancelar"
				onclick="escreverDialog.hide()" process="@this" />
		</h:form>
	</p:dialog>


	<!-- Dialogs -->
	<p:dialog widgetVar="dialogAnexos" resizable="false" modal="true"
		width="600" closable="false">
		<h:form id="formAnexo">

			<p:fileUpload mode="advanced" multiple="false" label="Adicionar"
				cancelLabel="Cancelar" uploadLabel="Upload" auto="true"
				fileUploadListener="#{mensagemMB.manipularFileUpload}"
				update=":formAnexo:dtListaAnexos" />
			<p:separator />
			<p:poll update=":formAnexo:dtListaAnexos" interval="1" />
			<p:dataTable id="dtListaAnexos" var="anexos"
				value="#{mensagemMB.listaArquivos}" rowIndexVar="index">
				<p:column headerText="Arquivo" width="450">
					<h:outputText value="#{anexos.name}" />
				</p:column>

				<p:column headerText="Remover">
					<p:commandLink action="#{mensagemMB.removerArquivoUpload}">
						<p:graphicImage style="padding-left: 15px;"
							value="#{resource['images/excluir.png']}" />
						<f:setPropertyActionListener
							target="#{mensagemMB.arquivoSelecionado}" value="#{anexos}" />
					</p:commandLink>
				</p:column>
			</p:dataTable>
			<p:commandButton value="Confirmar" onclick="dialogAnexos.hide()"
				style="margin-top: 10px;" />
			<p:commandButton value="Cancelar" oncomplete="dialogAnexos.hide()"
				actionListener="#{mensagemMB.limpaArquivos}"
				update=":formAnexo:dtListaAnexos" style="margin-top: 10px;" />
		</h:form>
	</p:dialog>

	<p:dialog widgetVar="dialogAnexosRecebidos" resizable="false"
		modal="true" width="600">
		<h:form id="formAnexoRecebidos">
			<p:dataTable id="dtListaAnexos" var="anexo"
				value="#{mensagemMB.files}">

				<p:column headerText="Arquivo" width="400">
					<h:outputText value="#{anexo.name}" />
				</p:column>

				<p:column headerText="Download" width="100">
					<p:commandLink id="downloadLink" value="Download" ajax="false">
						<p:fileDownload value="#{anexo}" />
					</p:commandLink>
				</p:column>

			</p:dataTable>
		</h:form>
	</p:dialog>

	<p:confirmDialog id="confirmDialog"
		message="Confirma o recebimento e leitura da mensagem?"
		header="Aviso!" severity="alert" widgetVar="cDialogAviso">
		<p:commandButton id="confirm" value="Sim"
			oncomplete="cDialogAviso.hide()"
			update=":formMensagens:dtMensagensRecebidas"
			actionListener="#{mensagemMB.mudarStatusLeitura}">
		</p:commandButton>
		<p:commandButton id="decline" value="Não agora"
			onclick="cDialogAviso.hide()" type="button" />
	</p:confirmDialog>

	<p:dialog widgetVar="dialogPesquisaNome" resizable="false" modal="true"
		width="350">
		<h:form>
			<h:panelGrid columns="2">
				<h:outputText value="Nome " />
				<p:inputText value="#{mensagemMB.nome}" size="50" />
			</h:panelGrid>
			<p:commandButton process="@form"
				update=":formMensagens:dtMensagensRecebidas" value="Pesquisar"
				oncomplete="dialogPesquisaNome.hide()" />
		</h:form>
	</p:dialog>

	<p:dialog widgetVar="dialogPesquisaAssunto" resizable="false"
		modal="true">
		<h:form>
			<h:panelGrid columns="2">
				<h:outputText value="Assunto " />
				<p:inputText value="#{mensagemMB.assunto}" />
			</h:panelGrid>
			<p:commandButton process="@form"
				update=":formMensagens:dtMensagensRecebidas" value="Pesquisar"
				oncomplete="dialogPesquisaAssunto.hide()" />
		</h:form>
	</p:dialog>

	<p:dialog widgetVar="dialogPesquisaData" resizable="false" modal="true">
		<h:form>
			<h:panelGrid columns="2">
				<h:outputText value="Data " />
				<p:calendar value="#{mensagemMB.data}" />
			</h:panelGrid>
			<p:commandButton process="@form"
				update=":formMensagens:dtMensagensRecebidas" value="Pesquisar"
				oncomplete="dialogPesquisaData.hide()" />
		</h:form>
	</p:dialog>

	<p:dialog widgetVar="dialogRamais" resizable="false" modal="true"
		width="600">
		<h:form id="formRamais">
			<p:dataTable id="dtListaRamais" var="usuario"
				value="#{usuarioMB.dmListaUsuariosRamais}">
				<p:column headerText="Nome" width="400">
					<h:outputText value="#{usuario.nome}" />
				</p:column>

				<p:column headerText="Ramal">
					<h:outputText value="#{usuario.ramal}" />
				</p:column>
			</p:dataTable>

			<p:commandButton value="Sair" oncomplete="dialogRamais.hide()"
				style="margin-top: 10px;" />
		</h:form>
	</p:dialog>

	<p:dialog widgetVar="dialogDestinatarios" resizable="false"
		modal="true" width="550">
		<h:form id="formDestinatarios">
			<p:pickList value="#{mensagemMB.dualListUsuarios}" var="usuario"
				effect="fade" itemValue="#{usuario}" showSourceControls="true"
				showTargetControls="true" converter="usuarioConverter">
				<f:facet name="sourceCaption">Disponíveis</f:facet>
				<f:facet name="targetCaption">Adicionados</f:facet>

				<p:column style="width:75%;">
					<h:outputText value="#{usuario.nome}" />
				</p:column>
			</p:pickList>

			<p:commandButton value="Ok" oncomplete="dialogDestinatarios.hide()"
				style="margin-top: 10px;" />
		</h:form>
	</p:dialog>

	<p:dialog widgetVar="dialogGrupos" resizable="false" modal="true"
		width="550">
		<h:form id="formGrupos">
			<p:pickList value="#{mensagemMB.dualListGrupos}" var="grupo"
				effect="fade" itemValue="#{grupo}" showSourceControls="true"
				showTargetControls="true" converter="grupoConverter">
				<f:facet name="sourceCaption">Disponíveis</f:facet>
				<f:facet name="targetCaption">Adicionados</f:facet>

				<p:column style="width:75%;">
					<h:outputText value="#{grupo.nome}" />
				</p:column>
			</p:pickList>

			<p:commandButton value="Ok" oncomplete="dialogGrupos.hide()"
				style="margin-top: 10px;" />
		</h:form>
	</p:dialog>

</h:body>
</html>
